<template>
  <div class="mod-dept">
    <el-form :inline="true" :model="deptForm">
      <el-form-item>
        <el-button v-if="isAuth('sys:dept:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="deptList"
      border
      style="width: 100%;">
      <el-table-column
        prop="deptId"
        header-align="center"
        align="center"
        width="100"
        label="ID">
      </el-table-column>
      <table-tree-column
        prop="name"
        header-align="center"
        treeKey="deptId"
        label="部门名称">
      </table-tree-column>
      <el-table-column
        prop="parentName"
        header-align="center"
        align="center"
        label="上级部门">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        header-align="center"
        align="center"
		width="150"
        label="排序号">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:dept:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.deptId)">修改</el-button>
          <el-button v-if="isAuth('sys:dept:delete')" type="text" size="small" @click="deleteHandle(scope.row.deptId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
	<!-- 弹窗, 新增 / 修改 -->
	<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
	import TableTreeColumn from '@/components/table-tree-column'
	import { treeDataTranslate } from '@/utils'
	import AddOrUpdate from './dept-add-or-update'
	export default {
		data () {
			return {
				deptForm: {},
				deptList: [],
				deptListLoading: false,
				addOrUpdateVisible: false
			}
		},
		components: {
			TableTreeColumn,
			AddOrUpdate
		},
		activated () {
			this.getDataList()
		},
		methods: {
			//获取数据列表
			getDataList () {
				this.deptListLoading = true
				this.$http({
					url: this.$http.adornUrl('/sys/dept/list'),
					method: 'get',
					params: this.$http.adornParams()
				}).then(({data}) => {
					this.deptList = treeDataTranslate(data, 'deptId')
					this.deptListLoading = false
				})
			},
			// 新增或修改
			addOrUpdateHandle (id) {
				this.addOrUpdateVisible = true
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id)
				})
			},
			// 删除
			deleteHandle (id) {
 				this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`/sys/dept/delete/${id}`),
						method: 'post',
						data: this.$http.adornData()
					}).then(({data}) => {
						if (data && data.code === 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.getDataList()
								}
							})
						} else {
							this.$message.error(data.msg)
						}
					})
				}).catch(() => {})
			}
		}
	}
</script>

<style>

</style>
